<template>
	<view>
		<uni-card margin="18rpx">
			<view style="display: flex;justify-content: space-between;">
				<view>
					<image :src="user.avatar!=''?baseUrl+user.avatar:'../../static/yonghu.png'" class="img2"></image>
				</view>
				<view>
					<view style="font-size: 36rpx;margin-bottom: 16rpx;">{{user.nickName}}</view>
					<view style="font-size: 26rpx;">{{schoolname}}</view>
				</view>
			</view>
		</uni-card>
		<uni-card style="padding-left: 0rpx;padding-right: 0rpx;" margin="18rpx">
			<uni-fav :checked="check" class="favBtn" :circle="true" bg-color="#dd524d" bg-color-checked="#007aff"
				fg-color="#ffffff" fg-color-checked="#ffffff" @click="favClick" style="margin: 0rpx 0rpx 20rpx 20rpx;"/>
			<view style="display: flex;justify-content: space-between;">
				<view style="margin-left: 20rpx;">
					<text style="font-size: 26rpx;color: red;font-weight: 700;">￥</text>
					<text style="font-size: 46rpx;color: red;font-weight: 700;">{{detail.price}}</text>
				</view>
				<view style="font-size: 26rpx;line-height: 46rpx;margin-right: 20rpx;">
					发布日期:{{detail.createDate}}
				</view>
			</view>
			<view class="titleview">{{detail.title}}</view>
			<view style="display: flex;margin: 20rpx 0rpx;">
				<view style="text-align: center;font-size: 26rpx;flex: 1;border-right: 1rpx #c0c0c0 solid;">
					颜色：{{detail.color}}
				</view>
				<view style="text-align: center;font-size: 26rpx;flex: 1;border-right: 1rpx #c0c0c0 solid;">
					成色：{{detail.damageDegree}}
				</view>
				<view style="text-align: center;font-size: 26rpx;flex: 1;">
					购买渠道：{{detail.buyWay}}
				</view>
			</view>
		</uni-card>

		<uni-card padding="6rpx" margin="18rpx">
			<view class="text1">
				<rich-text :nodes="detail.content"></rich-text>
			</view>
			<image :src="i" class="image" v-for="(i,index) in detail.img" @click="yvlan(index)" mode="widthFix"></image>
		</uni-card>
		<uni-section :title="'留言'+messageList.length+'条'" type="line"></uni-section>
		<view class="view1">
			<input type="text" class="int1" placeholder="请输入消息内容" v-model="message" />
			<button type="primary" size="mini" class="btn1" @click="send">发送</button>
		</view>
		<uni-list>
			<uni-list-item :title="i.user.nickName" :note="i.content" v-for="i in messageList"
				:thumb="baseUrl+i.user.avatar" thumb-size="lg" :right-text="i.createTime">
			</uni-list-item>
		</uni-list>
		<view style="height: 110rpx;"></view>
		<uni-goods-nav :fill="true" :options="show==true?options:options1" :button-group="show==true?customButtonGroup1:customButtonGroup2"
			@click="onClick" @buttonClick="buttonClick" class="goods" />
		<uni-popup ref="popup1">
			<view style="background-color: aliceblue;">
				<view style="height: 60rpx;line-height: 60rpx;font-size: 30rpx;padding: 6rpx;"><text style="font-weight: 700;">电话:</text>{{detail.phone}}</view>
				<view style="height: 60rpx;line-height: 60rpx;font-size: 30rpx;padding: 6rpx;"><text style="font-weight: 700;">其他联系方式:</text>{{detail.other}}</view>
				<button type="primary" @click="phone">拨打电话</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		addcollect,
		addfollow,
		addproductmessage,
		removecollect,
		removeproduct,
		selectcollect,
		selectinfo,
		selectproductlist,
		selectproductmessagelist,
		selectschoolname
	} from '../../api/myapi'
	import config from '@/config'
	export default {
		data() {
			return {
				check: false,
				id: "",
				userid: "",
				detail: {},
				user: {},
				schoolname: "",
				baseUrl: config.baseUrl,
				options: [{
					icon: 'shop',
					text: '主页',
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				},
				{
					icon: 'chat',
					text: '卖家'
				}],
				options1: [{
					icon: 'shop',
					text: '主页',
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}],
				customButtonGroup1: [{
					text: '联系他',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],
				customButtonGroup2: [{
					text: '删除商品',
					backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
					color: '#fff'
				}],
				messageList: [],
				message: '',
				show: true
			}
		},
		async onLoad(i) {
			uni.showLoading({
				title: "正在加载"
			})
			this.id = i.id
			this.userid = i.userid
			this.selectproductlist()
			this.selectproductmessagelist()
			this.selectschoolname()
			this.getinfo()
			this.selectcollect()
			uni.setNavigationBarTitle({
				title: this.detail.title
			})
			uni.hideLoading()
		},
		methods: {
			async selectcollect() {
				let r = await selectcollect({
					userid: uni.getStorageSync("userid"),
					productid: this.id
				})
				if (r.data != null) {
					this.check = true
				} else if (r.data == null) {
					this.check = false
				}
			},
			async favClick(index) {
				this.check = !this.check
				if (this.check) {
					let r = await addcollect({
						userid: uni.getStorageSync("userid"),
						productid: this.id
					})
					console.log(r);
				} else {
					let r = await removecollect({
							userid: uni.getStorageSync("userid"),
							productid: this.id
					})
					console.log(r);
				}
				this.$forceUpdate()
			},
			phone() {
				console.log(this.detail.phone);
				// uni.makePhoneCall({
				// 	phoneNumber: this.detail.phone,
				// 	success: (i) => {
				// 		console.log(i);
				// 	}
				// })
				plus.device.dial(this.detail.phone,true)
			},
			async selectschoolname() {
				let r = await selectschoolname({
					id: this.user.userid
				})
				this.schoolname = r.data.userSchool
			},
			async selectproductmessagelist() {
				let r = await selectproductmessagelist({
					id: this.id
				})
				this.messageList = r.data.reverse()
			},
			async selectproductlist() {
				let r = await selectproductlist({
					id: this.id
				})
				this.detail = r.data[0]
				console.log(this.detail);
			},
			async getinfo() {
				let r = await selectinfo({
					id: this.userid
				})
				console.log(r);
				this.user = r.data
				if (this.user.userId == uni.getStorageSync('userid')) {
					this.show = false
				} else {
					this.show = true
				}
			},
			async send() {
				let r = await addproductmessage({
					productid: this.id,
					content: this.message
				})
				this.$modal.msgSuccess(r.msg)
				this.message = ""
				this.selectproductmessagelist()

			},
			yvlan(i) {
				uni.previewImage({
					urls: this.detail.img,
					current: i,
					indicator: 'default'
				})
			},
			onClick(i) {
				console.log(this.user);
				if (i.index == 1) {
					this.$tab.navigateTo('/pages/message/message?tousername='+this.user.userName+"&userid="+this.user.userId+"&avatar="+this.user.avatar)
				} else if (i.index == 0) {
					console.log(this.user);
					this.$tab.navigateTo('/pages/shop/index?userid=' + this.user.userId)
				}
			},
			buttonClick() {
				if (!this.show) {
					this.$modal.confirm('您确定删除此商品？').then(async (r) => {
						if (r) {
							console.log(this.detail);
							let n = await removeproduct({
								id: this.detail.id
							})
							this.$modal.msg(r.msg)
							uni.navigateBack(1)
						}
					})
				} else {
					this.$refs.popup1.open("bottom")
				}
			}
		}
	}
</script>

<style>
	.btn1 {
		flex: 1;
		margin-left: 10rpx;
	}

	.view1 {
		width: 100%;
		background-color: white;
		padding: 10rpx;
		display: flex;
	}

	.int1 {
		flex: 9;
		background-color: #F5F5F5;
		border-radius: 20rpx;
		height: 60rpx;
		font-size: 26rpx;
		padding: 4rpx 8rpx;
	}

	.goods {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
	}

	.image {
		width: 100%;
		margin-top: 20rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.text1 {
		font-size: 30rpx;
		line-height: 46rpx;
		margin: 10rpx;
	}

	.titleview {
		font-size: 36rpx;
		font-family: '幼圆';
		font-weight: 700;
		margin-top: 20rpx;
		line-height: 50rpx;
		padding: 10rpx;
	}

	.view2 {
		display: flex;
		align-items: center;
	}

	.img2 {
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		border: 1rpx solid #c0c0c0;
	}
</style>